<!--引入富文本编辑器-->
<script src="/assets/summernote/js/jquery-3.4.1.min.js"></script>
<link href="/assets/summernote/css/bootstrap.min.css" rel="stylesheet">
<script src="/assets/summernote/js/bootstrap.min.js"></script>
<link href="/assets/summernote/css/summernote.css" rel="stylesheet">
<script src="/assets/summernote/js/summernote.min.js"></script>
<script src="/assets/summernote/lang/summernote-zh-CN.js"></script>
<form id="edit-form" class="form-horizontal" role="form" data-toggle="validator" method="POST" action="">

    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Product_name')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-product_name" data-rule="required" class="form-control form-control" name="row[product_name]" type="text" value="{$row.product_name}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Icon')}:</label>
        <div class="col-xs-12 col-sm-8">
            <div class="input-group">
                <input id="c-icon" data-rule="required" class="form-control form-control" readonly size="50" name="row[icon]" type="text" value="{$row.icon}">
                <div class="input-group-addon no-border no-padding">
                    <span><button type="button" id="plupload-icon" class="btn btn-danger plupload" data-input-id="c-icon" data-mimetype="image/gif,image/jpeg,image/png,image/jpg,image/bmp" data-multiple="false" data-preview-id="p-icon"><i class="fa fa-upload"></i> {:__('Upload')}</button></span>
                    <span><button type="button" id="fachoose-icon" class="btn btn-primary fachoose" data-input-id="c-icon" data-mimetype="image/*" data-multiple="false"><i class="fa fa-list"></i> {:__('Choose')}</button></span>
                </div>
                <span class="msg-box n-right" for="c-icon"></span>
            </div>
            <ul class="row list-inline plupload-preview" id="p-icon"></ul>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Sort')}:</label>
        <div class="col-xs-12 col-sm-8">
            <input id="c-sort" class="form-control form-control" name="row[sort]" type="number" value="{$row.sort}">
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('Text')}:</label>
        <div class="col-xs-12 col-sm-8">
            <textarea id="summernote" name="row[text]">{$row.text}</textarea>
        </div>
    </div>
    <div class="form-group layer-footer">
        <label class="control-label col-xs-12 col-sm-2"></label>
        <div class="col-xs-12 col-sm-8">
            <button type="submit" class="btn btn-success btn-embossed disabled">{:__('OK')}</button>
            <button type="reset" class="btn btn-default btn-embossed">{:__('Reset')}</button>
        </div>
    </div>
</form>
<!--引入富文本编辑器-->
<link href="/assets/summernote/css/bootstrap.min.css" rel="stylesheet">
<link href="/assets/summernote/css/summernote.css" rel="stylesheet">
<script src="/assets/summernote/js/jquery-3.4.1.min.js"></script>
<script src="/assets/summernote/js/summernote.min.js"></script>
<script src="/assets/summernote/js/bootstrap.min.js"></script>
<script src="/assets/summernote/lang/summernote-zh-CN.js"></script>
<script>
    $(document).ready(function () {
        var $summernote = $('#summernote').summernote({
            height: 300,                 // set editor height
            minHeight: null,             // set minimum height of editor
            maxHeight: null,             // set maximum height of editor
            focus: true,                  // set focus to editable area after initializing summernote
            lang: 'zh-CN',                 //set default language
            placeholder: '请输入内容', // 提示
            followingToolbar: true,
            // summernote自定义配置
            toolbar: [
                ['operate', ['undo', 'redo']],
                ['magic', ['style']],
                ['style', ['bold', 'italic', 'underline', 'clear']],
                ['para', ['height', 'fontsize', 'ul', 'ol', 'paragraph']],
                ['font', ['strikethrough', 'superscript', 'subscript']],
                ['color', ['color']],
                ['insert', ['picture', 'video', 'link', 'table', 'hr']],
                ['layout', ['fullscreen', 'codeview']],
            ],
            callbacks: {
                onImageUpload: function (files) {
                    uploadSummerPic(files[0], $summernote);
                }
            }
        });

        function uploadSummerPic(file, $summernote) {
            var fd = new FormData();
            fd.append("file", file);
            $.ajax({
                type: "POST",
                url: "product/productinfo/uploadImg",
                data: fd,
                cache: false,
                contentType: false,
                processData: false,
                success: function (data) {
                    // editor.insertImage($editable, data.url);
                    $summernote.summernote('insertImage', data.a, 'img');
                }
            });
        }
    });
</script>